<template>
  <div>
    <div class="g-content-map">
      <Alarm :mapList="mapList"></Alarm>
    </div>
    <TimeDate></TimeDate>
    <div class="public-part" :style="rightHeight">
      <div class="public-part-wrap">
        <div class="public-part-wrap2">
          <!--小区选择-->
          <community class="alarm-community" @onCommunityChange="onChangeDeptId"></community>
          <!--报警总数-->
          <countWarning :alarmList="alarmList" class="g-bkColor2"></countWarning>
          <!--24小时报警趋势-->
          <dayWarning class="g-bkColor2" :area-id="deptId"></dayWarning>
          <!--人流量预警-->
          <!--<peopleNum class="g-bkColor2"></peopleNum>-->
          <!--停车管理-->
          <!--<stopCar class="g-bkColor2"></stopCar>-->
          <!--小区出入-->
          <!--<apartment class="g-bkColor2"></apartment>-->
        </div>
      </div>
    </div>

    <!-- 报警列表弹窗 -->
    <div class="warn-showBox g-warn-showBox" v-show="popShow">
      <div @click="showBoxClose" class="showBox-close"><i class="iconfont icon-close"></i></div>
      <div class="scrollBox">
        <div class="event-list">
          <ul v-for="item in warnData" :key="item.id">
            <li @click="showMarker(item.eventSysId)">
              <div :title="item.eventContent" class="li-name">{{item.eventContent}}</div>
              <div class="li-time">{{item.eventTime}}</div>
              <div :title="item.moduleName" class="li-event">{{item.moduleName}}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TimeDate from '../../components/common/ui/TimeDate'
import Alarm from '../../components/common/event/alarm'
import dayWarning from '../../components/common/event/dayWarning'
import countWarning from '../../components/common/event/countWarning'
import stopCar from '../../components/common/event/stopCar'
import peopleNum from '../../components/common/event/peopleNum'
import apartment from '../../components/common/event/apartment'
import community from '../../components/common/select/community'

export default {
  name: 'eventSupervise',
  components: {
    TimeDate,
    dayWarning,
    countWarning,
    stopCar,
    peopleNum,
    apartment,
    Alarm,
    community
  },
  data () {
    return {
      deptId: null, // 部门id
      mapList: [],
      alarmList: [],
      rightHeight: 'height:' + (this.$base.getDocumentHeight() - 60) + 'px',
      timer: {} // 缓存计时器，方便在组件销毁时清除
    }
  },
  computed: {
    popShow () {
      return this.$store.state.event.warnPopShow
    },
    warnData () {
      return this.$store.state.event.warnData
    }
  },
  methods: {
    // 展示地图
    showMarker (id) {
      let map = this.$store.state.event.supMap
      map.moveToDot(id)
    },
    // 地图列表数据转化
    mapListConvert (data) {
      let list = {}
      for (let item of data) {
        if (!list[item.moduleId]) {
          list[item.moduleId] = []
        }
        list[item.moduleId].push(item)
      }
      return list
    },
    // 关闭报警弹窗
    showBoxClose () {
      this.$store.commit('setWarnPopShow', false)
    },
    // 小区选择
    onChangeDeptId (e) {
      let currentDeptId = e.deptId
      this.deptId = currentDeptId

      let url = this.$base.getUrl('getEventListByDeptId')
      let params = {
        url: url,
        data: {
          'deptId': currentDeptId
        }
      }
      this.$store.dispatch('getForm', params).then((res) => {
        this.$store.state.event.supMap.clearDots()
        this.mapList = res
        this.alarmList = res
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .g-content-map{
    position: fixed;
    top: 50px;
    right: 0;
    bottom: 0;
    left: 180px;
  }
  .skin-white {
    .g-bkColor2 {
      box-shadow: rgba(0, 0, 0, .1) 0 0 12px;
      border-radius: 4px;

      /*---------------------- 报警总数 白色版本样式  ----------------------*/
      /deep/ .warn-wrap {
        background-color: #fff !important;
        p {
          color: #4C6072 !important;
          font-weight: bold;
        }
      }
      /deep/ .warn-all, /deep/ .warn-legend > div {
        color: #333333 !important;
      }
      /deep/ .warn-showBox {
        background-color: #fff !important;
        li {
          color: #4C6072 !important;
        }
      }

      /*---------------------- 24小时报警趋势 白色版本样式  ----------------------*/
      /deep/ .day-content {
        background-color: #fff !important;
        border-radius: 10px !important;
        .title {
          color: #4C6072;
        }
      }

      /*---------------------- 人流量预警 白色版本样式  ----------------------*/
      /deep/ .p-Num {
        background-color: #fff !important;
      }
      /deep/ .p-head {
        color: #4C6072 !important;
        font-weight: 600;
      }

      /*---------------------- 停车管理 白色版本样式  ----------------------*/
      /deep/ .car-content {
        background-color: #fff !important;
        .title {
          color: #4C6072;
        }
        .car-legend > div i, .car-legend > div b {
          color: #333333;
        }
      }

      /*---------------------- 小区出入 白色版本样式  ----------------------*/
      /deep/ .apartment-content {
        background-color: #fff !important;
        .title {
          color: #333333 !important;
        }
      }

    }

    .g-warn-showBox {
      background-color: #fff !important;
      box-shadow: rgba(0, 0, 0, 0.1) 0 0 12px;
      li {
        color: #4C6072 !important;
      }
    }

  }

  .public-part {
    position: fixed;
    top: 60px;
    right: 10px;
    width: 270px;
    overflow: hidden;
  }

  .public-part-wrap {
    width: 290px;
    height: 100%;
    overflow-y: scroll;
  }

  .public-part-wrap2 {
    width: 260px;
    padding: 5px;
  }

  .warn-showBox {
    position: absolute;
    width: 350px;
    right: 290px;
    top: 60px;
    background: rgba(43, 54, 72, 0.95);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 20px;
    z-index: 10;
  }

  .scrollBox {
    width: 332px;
    overflow: hidden;
  }

  .event-list {
    width: 350px;
    height: 220px;
    overflow: auto;
  }

  .showBox-close {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    color: #fff;
  }

  .warn-showBox ul {
    margin-top: 20px;
  }

  .warn-showBox li {
    display: flex;
    cursor: pointer;
    list-style: none;
    color: #fff;
    /*justify-content: space-around;*/
    margin-bottom: 20px;
    font-size: 14px;
    opacity: 0.8;
  }

  .warn-showBox .li-name {
    width: 120px;
    margin-right: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .warn-showBox .li-time {
    width: 142px;
    margin-right: 7px;
  }

  .warn-showBox .li-event {
    width: 60px;
    color: #FF9900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  // 右上角弹窗样式
  .alarm-community {
    width: 260px;
    margin-bottom: 10px;
  }

</style>
<style>
  .skin-black .alarm-community .el-input__inner {
    background-color: rgba(43, 54, 72, 0.95);
    border-color: rgba(43, 54, 72, 0.95);
  }

  .skin-black .alarm-community.el-select .el-input__inner:focus {
    border-color: rgba(43, 54, 72, 0.95);
  }

  .skin-black .alarm-community.el-select .el-input.is-focus .el-input__inner {
    border-color: rgba(43, 54, 72, 0.95);
  }

  .skin-black .alarm-community.el-select:hover .el-input__inner {
    border-color: rgba(43, 54, 72, 0.95);
  }

  .skin-black .alarm-community .el-select-dropdown {
    background-color: rgba(43, 54, 72, 0.95);
  }
</style>
